<template>
  <div id="app">
    <!-- 搜索区域 -->
    <hello-world :searchConfig="searchConfig" :formData.sync="searchConfig.formData" >
      <template #btns>
        <el-form-item>
      <el-button @click="btnClick">搜索</el-button>
      <el-button @click="resetClick">重置</el-button>
    </el-form-item>
      </template>
    </hello-world>
    
    <p>你填写的表单数据为:{{searchConfig.formData}}</p>
    <!-- 表格区域 -->
    <table-cpn :tableConfig="tableConfig" :propList="propList" >
      <template #header-left>
        <el-button type="success">导出数据</el-button>
      </template>
      <template #header-right>
        <el-button type="primary">新建用户</el-button>
      </template>
      <template #status="scope">
        <el-button :type="scope.row.status == '待审核' ? 'success' : 'danger'" size="mini">{{scope.row.status}}</el-button>
      </template>
      <template #footer>
        <el-pagination
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </template>
    </table-cpn>
    <!-- 下方的选择区域 -->
    <el-checkbox-group v-model="type" @change="changeVal">
      <template v-for="item in propList">
        <el-checkbox :label="item.prop" name="type" :key="item.label">{{ item.label }}</el-checkbox>
      </template>
    </el-checkbox-group>
  </div>
</template>
 

<script>
import HelloWorld from "./components/HelloWorld.vue";
import TableCpn from "./components/TableCpn.vue";

export default {
  components: { HelloWorld, TableCpn },
  name: "App",
  data() {
    return {
      type: ["name","date", "status", "address"],
      searchConfig: {
        config: [
          {
            id: 1,
            type: "input",
            label: "人员编号",
            field: "num",
            isRequire:true,
            placeholder: "请输入编号",
          },
          {
            id: 2,
            type: "select",
            field:"region",
            label: "请选择活动区域",
            placeholder: "请输入活动区域",
            children: [
              { id: 11, label: "北京", value: "shanghai" },
              { id: 12, label: "上海", value: "beijing" },
            ],
          },
          {
            id: 3,
            type: "time",
            field: "time",
            label: "活动时间",
            placeholder: "请选择时间",
          },
          {
            id:4,
            type:'textarea',
            maxlength:10,
            field: "des",
            placeholder:'请输入描述'
          },
          {
            id:5,
            type:"checkbox",
            label:'配套设施',
            field:'checkList',
            list:['投影仪','电脑','座位牌','网线','无线网络']
          },
        ],
        formData: {
          num: "",
          region: "",
          time: "",
          des:'',
          checkList:[]
        },
      },
      tableConfig: {
        style: {
          // stripe:创建带斑马纹的表格
          stripe: false,
          // border  是否带边框
          border: true,
          //是否带前面的多选
          selection: true,
        },
        tableData: [
          {
            date: "2016-05-02",
            name: "王小虎",
            status: "待审核",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            status: "通过",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            status: "待审核",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            status: "通过",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
      },
      propList: [
        // slotname:插槽名  isSortable:该列是否需要排序
        { prop: "name", label: "用户名", minWidth: "100", hidden: false,slotname:'name',isSortable:false },
        { prop: "date", label: "日期", minWidth: "120", hidden: false,slotname:'date' },
        { prop: "status", label: "状态", minWidth: "80", hidden: false,slotname:'status' },
        { prop: "address", label: "地址", minWidth: "100", hidden: false,slotname:'address' },
        { prop: "operation", label: "操作", minWidth: "100", hidden: false,slotname:'operation' },
      ],
    };
  },
  methods: {
    resetClick() {
      console.log('hello')
    },
    changeValue(val) {
      console.log("子组件发出的值为:", this.searchConfig.formData.num);
    },
    btnClick(e) {
      console.log('我是btn',this.searchConfig.formData)
    },
    changeVal(val) {
      console.log(val);
      let propList = this.propList;
      propList.forEach((item) => {
        let hasitem = val.find((v) => {
          return v === item.prop;
        });

        if (hasitem) {
          item.hidden = false;
        } else {
          item.hidden = true;
        }
      });

      // this.$set(this.propList, propList);
      this.propList = propList;
      this.$forceUpdate();
      console.log(propList, this.propList);
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
